<style type="text/css">
	body {
		position: relative;
		background: #E8E8E8 url({$style.bg_image}) 0 0 no-repeat;
		background-size: cover;
		overflow: hidden;
		padding-bottom: 0;
	}
	header {
		font-size: .8em;
	}
	.gh-gl {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 80%;
		text-align: center;
		-webkit-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
	}
	.gh-gl-item {
		display: block;
		margin-bottom: .2em;
		padding-top: .5em;
		padding-bottom: .5em;
		background-color: rgba(255, 255, 255, .8);
	}
	.gh-tip {
		position: absolute;
		top: 0;
		left: 0;
	}
	.ellipsis {
		padding-top: 1px;
	}
	.swipe-container {
		overflow: hidden;
		visibility: hidden;
		position: relative;
		width: 100%;
	}
	.swipe-images {
		overflow: hidden;
		position: relative;
	}
	.swipe-images li {
		float: left;
		width: 100%;
		position: relative;
		text-align: center;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-color: #f5f5f5;
	}
	.swipe-bullets {
		position: absolute;
		z-index: 99;
		left: 0;
		right: 0;
		bottom: 0;
		text-align: center;
	}
	.swipe-bullets i {
		font-style: normal;
		font-size: 0;
		background-color: #ddd;
		display: inline-block;
		width: 8px;
		height: 8px;
		border-radius: 5px;
		margin: 2px;
	}
	.swipe-bullets i.active {
		background-color: #fff;
	}
	.from-bar{
		position: inherit;
	}
	.goods-category{
		margin: 2%;
		padding: 0.8em;
		width: 96%;
		background: #fff;
		box-sizing: border-box;
	}
	.goods-category li{
		box-sizing: border-box;
		float: left;
		width: 25%;
		text-align: center;
		font-size: .8em;
	}
	.goods-category li img{
		width: 3em;
		height: 3em;
		border-radius: 50%;
	}
	.goods-category li p{
		height: 24px;
		line-height: 24px;
		margin-top: 8px;
	}
	.goods-lists{
		margin: 0 2%;
	}
	.goods-lists li{
		padding: 0.5em;
		background: #ffffff;
		margin-bottom: 0.8em;
		text-align: center;
		box-sizing: border-box;
		float: left;
	}
	.goods-lists li p{
		margin-top: 0.3em;
		height: 1.2em;
		line-height: 1.2em;
		overflow: hidden;
	}
	.goods-lists li img{
	}
</style>

<div class="swipe-container" id="swipeSlide">
    <ul class="swipe-images">
        <volist name="goodsLists" id="v" offset="0" length="5">
            <li>
                <img src="{$v['images'][0]}">
            </li>
        </volist>
    </ul>
    <p class="swipe-bullets">
        <volist name="goodsLists" id="v" offset="0" length="5">
            <i <eq name="i" value="0">class="active"</eq>></i>
        </volist>
    </p>
</div>
<script src="__PUBLIC__/Static/js/swipe.min.js" type="text/javascript" charset="utf-8"></script>
<script>
	$(function() {
		var slide = $("#swipeSlide");
		var bullets = $(".swipe-bullets i");
		var len = bullets.size();
		var swipe = new Swipe(slide.get(0), {
			auto: 3000,
			callback: function(index) {
				for (var i = 0; i < len; i++) {
					bullets.eq(i).removeClass('active');
				}
				bullets.eq(index).addClass('active');
			}
		});
	});
</script>

<header class="gh-tip flex-row from-bar">
	<div class="row-item">
		<eq name="user.subscribe" value="0">
			<notempty name="fromUser">
				<notempty name="fromUser.face">
					<div class="gh-tip-face fl">
						<img class="w100" src="{$fromUser.face}" alt="" style="width:100px">
					</div>
				</notempty>
				<p class="ellipsis">来自 {$fromUser.nickname} 的推荐</p>
				<p class="ellipsis">{$config.unsubscribe_text|default="关注我们，获取更多优惠"}</p>
			</notempty>
			<else/>
			<notempty name="user">
				<notempty name="user.face">
					<div class="gh-tip-face fl">
						<img class="w100" src="{$user.face}" alt="">
					</div>
				</notempty>
				<p class="ellipsis">{$user.nickname}，感谢您的关注</p>
				<p class="ellipsis">{$config.subscribed_text|default="购买后分享给朋友，获取分享积分"}</p>
			</notempty>
		</eq>
	</div>

	<if condition="!$user['subscribe']">
		<a href="{$config.subscribe_url}" class="btn btn-theme">关注我们</a>
		<else/>
		<a href="{:url(null, 'DisShop', 'my', 'sid='.$sid)}" class="btn btn-theme">个人中心</a>
	</if>
</header>

<div class="flex-row" id="goods-category-bar">
	<ul class="goods-category">
		<tag:disShopConfig id="vv">
		<li>
			<a href="{$vv.url}">
			<img src="{$vv.icon}"/>
			<p>{$vv.name}</p>
			</a>
		</li>
		</tag:disShopConfig>
	</ul>
</div>
<if condition="$listSize eq 0">
<script type="text/javascript">
$(function(){
   $("#goods-category-bar").hide();
})
</script>
</if>

<div class="flex-row">
	<ul class="goods-lists">
		<volist name="goodsLists" id="v">
			<li><a href="{$v.url}"><img src="{$v['images'][0]}" /><p>{$v.name}</p></a></li>
		</volist>
	</ul>
</div>

